<template>
  <div>
    <header-top ></header-top>
    <div>
      <el-row type="flex"  justify="center">
        <el-col :span="9" class="author_info">
          <el-row sty>
            <el-col :span="6" class="author_avatar">
              <img :src="imageUrl+author.avatar" alt="" v-if="author">
            </el-col>
            <el-col :span="18" class="author_avatar">
              <div class="author_nickName"><i class="iconfont icon-jiangpai" style="font-size: 30px;color: #f1da7f;margin-top: -2px;font-weight: lighter" v-if="author.isFamous==1"></i>{{author.nickname}}</div>
              <div style="float: right">
                <i class="iconfont icon-weixin contact-way"></i>
                <i class="iconfont icon-github contact-way"></i>
                <i class="iconfont icon-QQ contact-way"></i>
              </div>
              <div class="author_description" style="margin:20px 0 0 20px">{{author.description}}</div>
              <el-button v-if="status==0" type="success" round style="float: right;margin-top: 60px" @click="addFollowThisAuthor(userId,author.id)">加关注</el-button>
              <el-button v-if="status==1" type="danger" round style="float: right;margin-top: 60px" @click="cancelFollowThisAuthor(userId,author.id)">取消关注</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5" class="author_info" style="margin-left: 30px;padding-top:20px">
          <el-row type="flex"  justify="center">
            <el-col :span="8" class="right_info_box">
              <h4 @click="changeActiveName('fifth')">TA的关注</h4>
              <span>{{author.followCount}}</span>
            </el-col>
            <el-col :span="8" class="right_info_box" style="margin-left: 20px">
              <h4 @click="changeActiveName('sixth')">TA的粉丝</h4>
              <span>{{author.fanCount}}</span>
            </el-col>
            <el-col :span="8" class="right_info_box" style="margin-left: 20px">
              <h4>等级</h4>
              <span style="color: red">LV6</span>
            </el-col>
          </el-row >
          <el-row type="flex"  justify="center" style="margin-top: 40px">
            <el-col :span="12" class="right_info_box1">
              <span @click="changeActiveName('first')">TA的文章</span>
            </el-col>
            <el-col :span="12" class="right_info_box1" style="margin-left: 30px">
              <span @click="changeActiveName('fourth')">TA的收藏</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row type="flex"  justify="center">
        <el-col :span="9">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="padding:10px 20px 10px 10px">
            <el-tab-pane label="TA的文章" name="first" style="border: 1px solid lightgray;border-radius: 4px">
              <!--ta的文章列表-->
              <authorArticles v-bind:authorId="authorId"></authorArticles>
            </el-tab-pane>

            <el-tab-pane label="TA的收藏" name="fourth" style="border: 1px solid lightgray;border-radius: 4px">
              <authorCollections v-bind:authorId="authorId"></authorCollections>
            </el-tab-pane>

            <el-tab-pane label="TA的关注" name="fifth" style="border: 1px solid lightgray;border-radius: 4px">
            <!--ta的关注列表-->
            <AuthorFollow v-bind:authorId="authorId"></AuthorFollow>
          </el-tab-pane>

            <el-tab-pane label="TA粉丝" name="sixth" style="border: 1px solid lightgray;border-radius: 4px">
              <!--ta的粉丝列表-->
              <AuthorFans ref="authorFans" v-bind:authorId="authorId"></AuthorFans>
            </el-tab-pane>


          </el-tabs>
        </el-col>
        <el-col :span="5" style="margin-left: 30px;padding-top:50px">
          <div class="right_bar_item">
            <h3>TA的热门文章</h3>
            <p v-for="h in otherHotArticles"><el-link type="success" class="right_links" @click="showArticleDetail(h.id,h.user.id)">{{h.title}}</el-link></p>
          </div>
          <div class="right_bar_item">
            <h3>TA的最新文章</h3>
            <p v-for="n in otherNewArticles"><el-link type="success" class="right_links" @click="showArticleDetail(n.id,n.user.id)">{{n.title}}</el-link></p>
          </div>
          <div class="block" style="margin-left: 35%">
            <el-pagination
                background
                :hide-on-single-page="true"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
import headerTop from "@/components/HeaderTop";
import myTags from "@/components/MyTags";
import viewHistory from "@/components/ViewHistory";
import authorArticles from "@/components/AuthorArticles";
import authorCollections from "@/components/AuthorCollections";
import '@/assets/font/iconfont.css'
import AuthorFollow from "@/components/AuthorFollow";
import AuthorFans from "@/components/AuthorFans";
export default {
  name: "OtherInfo",
  components:{headerTop,authorArticles,myTags,authorCollections,viewHistory,AuthorFollow,AuthorFans},
  data(){
    return{
      userId:'',
      imageUrl:this.$Myurl.userImageUrl,
      activeIndex:'-1',
      authorId:'',
      author:{},
      status:'',
      activeName:'first',
      otherHotArticles:[],
      otherNewArticles:[],
      total:5,
      pageSize:5,
      currentPage:1,
      isSpecial:''
    }
  },
  methods:{
    queryFollowStatus(){
      let url = 'user/findFollowStatus';
      this.$axios.get(url,{
        params:{
          authorId:this.authorId,
          userId:this.userId
        }
      })
        .then(res=>{
            if(res.data.code == 200){
              this.status = res.data.data;
            }
          })
    },

    addFollowThisAuthor(userId,authorId){
      if(this.userId == -1){
        this.$message.warning('当前还未登录，不能关注~')
        return;
      }
      let url = 'user/addFollow';
      this.$axios.get(url,{
        params:{
          authorId:authorId,
          userId:userId
        }
      })
          .then(res=>{
            if (res.data.code == 200){
              this.$message({
                type:'success',
                message:res.data.msg,
                duration:1000
              });
              this.getAuthor();
              this.getOtherHotArticle();
              this.getOtherNewArticle();
              this.queryFollowStatus();
              this.$refs.authorFans.getOtherArticlesFans();
            }else {
              this.$message({
                message:res.data.msg,
                type:"error",
                duration:1000
              })
            }
          });
    },
    cancelFollowThisAuthor(userId,authorId){
      let url = 'user/cancelFollowUser';
      this.$axios.get(url,{
        params:{
          authorId:authorId,
          userId:userId
        }
      })
          .then(res=>{
            if (res.data.code == 200){
              this.$message({
                type:'warning',
                message:res.data.msg,
                duration:1000
              });
              this.getAuthor();
              this.getOtherHotArticle();
              this.getOtherNewArticle();
              this.queryFollowStatus();
              this.$refs.authorFans.getOtherArticlesFans();
            }else {
              this.$message({
                message:res.data.msg,
                type:"error",
                duration:1000
              })
            }
          });
    },
    changeActiveName(id){
      console.log("----")
      this.activeName = id;
      console.log(this.activeName)
    },
    handleCurrentChange(val) {

    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getAuthor(){
      let url = 'user/findUserByKey/'+this.authorId;
      this.$axios.get(url)
          .then(res=>{
            if(res.data.code == 200){
              this.author = res.data.data;
              console.log(this.author)
            }
          })
    },
    showArticleDetail(articleId,authorId){
      this.$router.push({
        path:'/articleDetail',
        query: {
          articleId: articleId,
          authorId: authorId
        }
      });
    },
    getOtherHotArticle(){
      let url = 'article/getHotArticleListByAuthorIdAndStatus'
      this.$axios.get(url,{
        params:{
          authorId:this.authorId,
          status:1
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.otherHotArticles = res.data.data;
            }
          })
    },
    getOtherNewArticle(){
      let url = 'article/getNewArticleListByAuthorIdAndStatus'
      this.$axios.get(url,{
        params:{
          authorId:this.authorId,
          status:1
        }
      }).then(res=>{
            if(res.data.code == 200){
              this.otherNewArticles = res.data.data;
            }
          })
    },
    initUserInfo(){
      if(sessionStorage.getItem("userInfo")){
        this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
      }else{
        this.userId = -1;
      }
    },
  },
  created() {
    this.authorId = this.$route.query.authorId;
    console.log('作者id'+this.authorId)
    this.initUserInfo();
    this.getAuthor();
    this.getOtherHotArticle();
    this.getOtherNewArticle();
    this.queryFollowStatus();
  }
}
</script>

<style scoped>
.author_info {
  margin-top: 30px;
  height: 240px;
  border: 1px solid lightgray;
  border-radius: 4px;
}
.author_avatar {
  padding: 20px 20px;
}
.author_avatar img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  border: 2px solid lavender;
}
.author_nickName{
  color: #000;
  font-size: 26px;
  font-family: "微软雅黑 Light";
  font-weight: bolder;
  width: 60%;
}
.contact-way {
  font-size: 30px;
  margin-left: 6px;
}
.right_info_box {
  width: 90px;
  height: 90px;
  border: 1px solid lightgray;
  text-align: center;
  border-radius: 6px;
}
.right_info_box h4{
  margin:15px 0;
}
.right_info_box1 {
  width: 120px;
  height: 40px;
  line-height: 40px;
  border: 1px solid lightgray;
  text-align: center;
  border-radius: 6px;
  letter-spacing: 3px;
}
.right_info_box1:hover {
  cursor: pointer;
  background-color: #f4f3f3;
}
/*.my_article_item{*/
/*  padding: 0 10px ;*/
/*}*/
.my_article_body{
  padding: 0 10px;
  border-radius: 4px;
}
.my_article_body h3{
  padding: 8px 20px;
  margin: 0;
  border-bottom: 1px solid lightgray;
}
.my_article_description {
  padding: 8px 20px;
  height: 80px;
  margin: 0;
}
.my_article_bottom {
  padding: 3px 20px;
  border-top: 1px solid lightgray;
  line-height: normal;
}
.my_article_bottom i:not(:first-child) {
  margin-left: 30px;
}
.article_detail:hover {
  /*text-underline:#5bc65b;*/
  text-decoration: underline;
  cursor: pointer;
  color: #f1da7f;;
}

.right_bar_item{
  height: 300px;
  background-color: #f9fafc;
  border-radius: 4px;
  border: 1px solid lightgray;
  margin-bottom: 20px;
  text-align: center;
}
.right_bar_item h3{
  text-align: left;
  margin-left: 20px;
}

.right_links {
  font-size: 18px;
}
</style>